<!DOCTYPE html>
<html>
<head>
    <div th:include="base-libs-easyui :: base-libs-easyui"/>
    <title>选择行政区划</title>
    <style type="text/css">
        body {
            padding: 0px 10px;
        }

        .xzqh-item{
            padding: 6px 10px;
            text-decoration: none !important;
            cursor: pointer;
            margin: 2px 4px;
            display: inline-block;
        }

        .xzqh-unselected:hover {
            background-color: #dcedfe;
        }

        .xzqh-selected {
            background-color: #2e80e6;
            color: #FFF;
        }
        .xzqh-selected:hover {
            color: #FFF!important;
        }
    </style>
</head>
<script th:inline="javascript">
    /**读取request中的初始化数据*/
    var requestData = [[${requestData}]];
</script>
<script type="text/javascript">
    $(function () {
        initView();
        initData();
    });

    function initData() {
        var xzqhdm = $.QuickUrlUtils.getRequest("xzqhdm");
        $("body").data("xzqhdm", xzqhdm);
        if(StringUtils.isEmpty(xzqhdm)){
            XzqhUtils.getAll({
                callback: setData
            });
        }
        else{
            XzqhUtils.getSjxzqh({
                xzqhdm: xzqhdm
                ,callback: setData
            });
        }
    }
    function setData(xzqh){
        if(xzqh){
            createTabContent(xzqh, 0);
        }
    }

    function createTabContent(ary, tabIndex){
        var tab = $('#tt').tabs('getTab', tabIndex);
        var dd = $(tab).find("dd");
        var items = [];
        /*当前页面的行政区划*/
        var curr_xzqhdm = $("body").data("xzqhdm");
        var triggerItem = null;
        $.each(ary, function(index, item){
            var xzqhItem = createXzqhItem(item)
            items.push(xzqhItem);
            if(!StringUtils.isEmpty(curr_xzqhdm)){
                var item_xzqhdm = item["XZQHDM"];
                var length = parseInt(item["XZQHJB"])*2;
                var curr_xzqhdm_sub = curr_xzqhdm.substring(0, length);
                if(item_xzqhdm == curr_xzqhdm_sub){
                    triggerItem = xzqhItem;
                }
            }
        })
        dd.append(items);
        if(triggerItem){
            $(triggerItem).trigger("click");
        }
    }

    function initView() {
        $("body").on("selectLast", function(){
            /*当前页面的行政区划*/
            var curr_xzqhdm = $("body").data("xzqhdm");
            if(StringUtils.isEmpty(curr_xzqhdm)){
                parent.layer.closeAll();
            }else{
                $("body").data("xzqhdm", "");
            }
        });
        $("body").on("click", ".xzqh-item", function(){
            $(this).removeClass("xzqh-unselected").addClass("xzqh-selected").siblings().removeClass("xzqh-selected");
            changeTab($(this));
        })
    }

    /**创建行政区划item*/
    function createXzqhItem(data){
        var item = $($("#xzqhItem").html());
        $(item).text(data["XZQHMC"]);
        $(item).attr("value", data["XZQHDM"]);
        $(item).data("xzqh", data);
        return item;
    }
</script>

<body class="easyui-layout">
<div region="center" style="border: none;">
    <div id="tt" class="easyui-tabs" data-options="justified:true" fit="true">
        <div title="省份" style="padding:10px">
            <dl>
                <dd>
                </dd>
            </dl>
        </div>
        <div title="城市" style="padding:10px">
            <dl>
                <dd>
                </dd>
            </dl>
        </div>
        <div id="tabQu" title="区县" style="padding:10px">
            <dl>
                <dd>
                </dd>
            </dl>
        </div>
        <div title="街道" style="padding:10px">
            <dl>
                <dd>
                </dd>
            </dl>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="xzqhItem">
    <a class="xzqh-item xzqh-unselected"></a>
</script>
</html>


